<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/echarts/4.0.2/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div style="width:666px;height:666px;overflow-y:auto;overflow-x:hidden;">
        <div id="main" style="width:666px;height:666px;"></div>
    </div>
    
    
    <input type="button" value="隐藏坐标" onClick="hidexy();">
    <input type="button" value="显示坐标" onClick="showxy();">
    <input type="button" value="停止滚屏" onClick="stopChart()">
    <input type="button" value="开始运动" onClick="startChart()">
    <input type="button" value="减少密度" onClick="deldensity()">
    <input type="button" value="增加密度" onClick="adddensity()">
    <input type="button" value="增加一组数据" onClick="addchar()">
    <input type="button" value="删除一组数据" onClick="delchar()">
    <input type="button" value="窗口变大" onClick="addchar()">
    <input type="button" value="窗口变小" onClick="delchar()">
</body>
</html>
<script type="text/javascript">
//一组时间
function random_Date(density)
{
	var now = new Date();
	var res = [];
	var len = density;
	while (len--) {
		res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
		now = new Date(now - 2000);
	}
	return res;
}

function random_num(density)
{
	var res = [];
	var len = 0;
	while (len < density) {
		res.push((Math.random()*10 + 5).toFixed(1) - 0);
		len++;
	}
	return res;
}

// 基于准备好的dom，初始化echarts实例
var height3=($("#main").height()-90-5)/3;
var width3=$("#main").width()-40;
var Chart = new bus_echar({
	id:"main",
	echarts:echarts,
})

function addchar()
{
	var data={xAxis:[],series:[]};//初始数据
	//data.xAxis.push(random_Date(66));
	data.xAxis.push(random_Date(66));
	//data.series.push(random_num(66));
	data.series.push(random_num(66));
	//开启队列
	if( Chart.get_data().xAxis.length>2 ){ $("#main").height($("#main").height()+222);}
	Chart.add_data(data);
}
function delchar()
{
	if( Chart.get_data().xAxis.length>2 ){ $("#main").height($("#main").height()-222);}
	Chart.del_data()
}

function adddensity()
{
	Chart.add_density()
}
function deldensity()
{
	Chart.del_density()
}

function stopChart()
{
	Chart.stopChart()
}

function startChart()
{
	Chart.startChart()
}

function hidexy()
{
	Chart.hidexy()
}

function showxy()
{
	Chart.showxy()
}

//假数据
setInterval(function (){
	
	var c_data=Chart.get_data();
	var data={xAxis:[],series:[]};
	for(var i=0;i<c_data.xAxis.length;i++)
	{
		data.xAxis.push((new Date()).toLocaleTimeString().replace(/^\D*/,''));
		data.series.push(random_num(1)[0])
	}
	
	Chart.settime(data);

}, 1000);
// myChart.setOption(option);
 
//echar业务
function bus_echar(pram)
{
	//pram数据结构
	//pram.id:操作的DIV的ID
	//pram.echarts:操作的echart对象
	pram=pram||{};
	if(!pram.echarts){console.log("没有echarts对象，此项为必填项");return;}
	if(!pram.id){console.log("id为必填项");return;}
	pram.start=pram.start||60;//起步密度
	pram.end=pram.end||100;//密度结尾处
	
	pram.ymaxmin=pram.ymaxmin||{};
	pram.ymaxmin={max:pram.ymaxmin.max||20,min:pram.ymaxmin.min||3};
	
	 //私有化，
	var Element = document.getElementById(pram.id);
	var myChart = (pram.echarts).init(Element);//初始化echarts
	var height3 = (Element.clientHeight-90-5)/3;
	var width3 = Element.clientWidth-40;
	
	var queue={};//数据队列
	    queue.xAxis=[];
	    queue.series=[];
	 //数据格式 
	 //queue.xAxis=[[],[],[]]
	 //initdata.yAxis
	 //initdata.series
	 
	//echart数据
	 var option={
	   title: {
		show:false
		},
	   tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: 'green'
				}
			}
		},
		grid: [
		],
		legend: {
	
		},
		dataZoom:[
			{
				xAxisIndex:[],
				show:false,
				start: pram.start,//起步密度
				end: pram.end 
			},
		],
		xAxis: [
		],
		yAxis: [
		],
		series: [
		]
	 };
	 
	var fun={};//私有函数
	//获取当前数据 xAxis和series
	this.get_data = function()
	{
		var data={};
		data.xAxis=option.xAxis;
		data.series=option.series;
		//myChart.getOption()
		return data;
	}

	//操作数据队列  队列左侧删除，右侧加入
	this.settime=function(datas)
	{
		//datas格式为
		//{xAxis:[[1,2,3],[1,2,3]],series:[[1,2,3],[1,2,3]]
		if( (datas.xAxis.length!=queue.xAxis.length) || (datas.series.length != queue.series.length)|| (datas.series.length == 0) ){console.log("传入数据组数和现存数据组数不对");return 0;}
		//先删除队列左侧数据
		for(var i=0;i<queue.xAxis.length;i++)
		{
			queue.xAxis[i].shift();
			queue.xAxis[i].push(datas.xAxis[i])
			
			queue.series[i].shift();
			queue.series[i].push(datas.series[i])
		}
		myChart.setOption(option);
	}
	
	//隐藏坐标
	this.hidexy=function()
	{
		if( option.xAxis.length==0||option.series.length==0 ){return;}
		for(var i=0;i<option.xAxis.length;i++)
		{
			option.xAxis[i].show=false;
			option.yAxis[i].show=false;
		}
		myChart.setOption(option);
	}
	//显示坐标
	this.showxy=function()
	{
		if( option.xAxis.length==0||option.series.length==0 ){return;}
		for(var i=0;i<option.xAxis.length;i++)
		{
			option.xAxis[i].show=true;
			option.yAxis[i].show=true;
		}
		myChart.setOption(option);
	}
	
	//开始滚动
	this.startChart = function()
	{
		if( option.xAxis.length==0||option.series.length==0 ){return;}
		for(var i=0;i<option.xAxis.length;i++)
		{
			option.series[i].data = queue.series[i];
			option.xAxis[i].data = queue.xAxis[i];
		}
		myChart.setOption(option);
	}
	//停止滚动
	this.stopChart = function()
	{
		if( option.xAxis.length==0||option.series.length==0 ){return;}
		for(var i=0;i<option.xAxis.length;i++)
		{
			option.series[i].data = option.series[i].data.concat();
			option.xAxis[i].data = option.xAxis[i].data.concat();
		}
		myChart.setOption(option);
	}
	
	//减少密度 spa为间距
	this.del_density = function(spa)
	{
		if(option.dataZoom[0].xAxisIndex.length ==0){return;}
		spa=spa||10
		if(option.dataZoom[0].start-0+spa<100)
		{
			option.dataZoom[0].start=option.dataZoom[0].start-0+spa;
			myChart.setOption(option);
			return 1;
		}
		else
		{
		    return 0;
		}
	}
	//增加密度
	this.add_density = function(spa)
	{
		if(option.dataZoom[0].xAxisIndex.length==0){return;}
		spa=spa||10
		if(option.dataZoom[0].start-spa>0)
		{
			option.dataZoom[0].start=option.dataZoom[0].start-spa;
			myChart.setOption(option);
			return 1;
		}
		else
		{
		    return 0;
		}
	}
	
	//增加N组数据
	this.add_data = function(data_arr)
	{
		//data_arr数据结构
		//xAxis:[[1,2,3,4,5],[1,2,3,4,5]],series:[[1,2,3,4,5],[1,2,3,4,5]]
		for(var i=0;i<data_arr.xAxis.length;i++)
		{
			option.grid.push({x:20,y:(function(a){ if(a==0){return 5}else{return a*(height3+30)} })(option.grid.length), width:width3,height:height3})//echar的图表
			option.dataZoom[0].xAxisIndex.push( option.dataZoom[0].xAxisIndex.length );
			
			var xAxis={};
			    xAxis.gridIndex = option.xAxis.length ;
			    xAxis.splitLine = {show:false} ;
			    xAxis.type = 'category' ;
			    queue.xAxis.push( data_arr.xAxis[i] );//外部数据从插入队列
			    xAxis.data = queue.xAxis[ queue.xAxis.length-1 ];//队列插入echarts ;
			option.xAxis.push( xAxis )

			var yAxis={};
			    yAxis.gridIndex = option.yAxis.length ;
			    yAxis.type = 'value';
			    yAxis.max = 18 ;
			    yAxis.min = 3 ;

			option.yAxis.push( yAxis );

			var series={};
			    series.xAxisIndex = option.series.length;
			    series.yAxisIndex = option.series.length;
			    series.type = 'line';
			    series.symbolSize = 0;
			    series.smooth = true;
			    queue.series.push( data_arr.series[i] );//外部数据从插入队列
				series.data = queue.series[ queue.series.length-1 ];//队列插入echarts ;
			option.series.push( series )
		}
		
		myChart.clear()
		myChart.setOption(option);
		myChart.resize()
		
	}
	//减少一组数据
	this.del_data = function(index)
	{
		index=index||0;
		console.log(queue)
		option.dataZoom[0].xAxisIndex.pop();
		option.grid.pop();//echar的图表
		
		option.xAxis.splice(index,1);
		queue.xAxis.splice(index,1);
		
		option.yAxis.splice(index,1);
		
		option.series.splice(index,1);
		queue.series.splice(index,1);
		
		for(var i=0;i<option.xAxis.length;i++)
		{
		  option.xAxis[i].gridIndex=i;
		  option.yAxis[i].gridIndex=i;
		  option.series[i].xAxisIndex=i;
		  option.series[i].yAxisIndex=i;
		}

		myChart.clear()
		myChart.setOption(option);
		myChart.resize()
	}
	
}
</script>